<template>
  <div class="bzqk-root">
    <base-filed-detail :submit-data-action="submitDataAction" :mid="mid" :title="title" :query-list-action="queryListAction" :rules="rules"
                       :load-list-before="loadListBefore" :view-field="viewField" :formFiled="formFiled" :submitBeforeAction="submitBeforeAction">

      <template v-slot:form-item>
        <el-form-item label="播种方式" prop="type">
          <el-select v-model="formFiled.type" placeholder="请选择" clearable size="small">
            <el-option
              v-for="dict in typeDict"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="播种深度" prop="depth">
          <el-input v-model="formFiled.depth"></el-input>
        </el-form-item>
        <el-form-item label="播种开始时间" prop="startDate">
          <el-date-picker
            size="mini"
            v-model="formFiled.startDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="播种结束时间" prop="endDate">
          <el-date-picker
            size="mini"
            v-model="formFiled.endDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="播种面积" prop="area">
          <el-input type="number" v-model="formFiled.area"></el-input>
        </el-form-item>
        <el-form-item label="亩用种量" prop="seedQuantity">
          <el-input type="number" v-model="formFiled.seedQuantity"></el-input>
        </el-form-item>
        <el-form-item label="行株距" prop="rowDistance">
          <el-input type="number" v-model="formFiled.rowDistance"></el-input>
        </el-form-item>
        <el-form-item label="播种前" prop="bzqpic">
          <upload-image :limit="1" v-model="formFiled.bzqpic"></upload-image>
        </el-form-item>
        <el-form-item label="播种后" prop="bzhpic">
          <upload-image :limit="1" v-model="formFiled.bzhpic"></upload-image>
        </el-form-item>
      </template>
    </base-filed-detail>
  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import baseFiledDetail from '../components/baseFiledDetail'
  import { sowList, sowEdit } from '@/api/industry/cpf'
  import uploadImage from '@/components/UploadImage'
  import { getDicts } from '@/api/system/dict/data'

  export default {
    name: 'bzqk',
    props: {
      mid: {
        type: [String, Number],
        default: null
      }
    },
    components: {
      uploadImage,
      baseFiledDetail
    },
    setup(props, content) {
      let data = reactive({
        formFiled: {
          type: null,
          depth: null,
          startDate: null,
          endDate: null,
          area: null,
          rowDistance: null,
          seedQuantity: null,
          bzqpic: [],
          bzhpic: []
        },
        queryListAction: sowList,
        submitDataAction: sowEdit,
        title: '播种情况',
        rules: {},
        typeDict: [],
        viewField: [{ label: '播种方式', field: 'type' },
          { label: '播种深度', field: 'depth' },
          { label: '播种开始时间', field: 'startDate' },
          { label: '播种结束时间', field: 'endDate' },
          { label: '播种面积', field: 'area' },
          { label: '行株距', field: 'rowDistance' },
          { label: '亩用种量', field: 'seedQuantity' },
          { label: '播种前', field: 'photos', type: 'img', photoIndex: 0 },
          { label: '播种后', field: 'photos', type: 'img', photoIndex: 1 }]

      })

      const loadDict = async() => {
        let response = await Promise.all([
          getDicts('fil_sow_type')
        ])
        let [{ data: typeDict }] = response
        data.typeDict = typeDict
      }

      const loadListBefore = async(response) => {
        await loadDict()

        response.rows.map(item => {
          if (item.type != null) {
            item.type = data.typeDict.find(el => item.type == el.dictValue).dictLabel
          }
          return item
        })
        return response

      }

      const submitBeforeAction = (requestData) => {
        let req = JSON.parse(JSON.stringify(requestData))
        req.photos = [{ type: 1, ...req.bzqpic[0] }, { type: 2, ...req.bzhpic[0] }]
        return req
      }
      return { ...toRefs(data), submitBeforeAction, loadListBefore }
    }
  }
</script>

<style scoped lang="scss">
  .bzqk-root {

  }
</style>
